<!-- src/views/student/GradeView.vue -->
<template>
  <div class="grade-view">
    <h2>实习成绩查看</h2>

    <!-- 成绩概览 -->
    <el-row :gutter="20" class="grade-summary">
      <el-col :span="8">
        <el-card>
          <div class="summary-item">
            <div class="summary-label">综合成绩</div>
            <div class="summary-value" :class="getGradeClass(overallGrade.averageScore)">
              {{ overallGrade.averageScore || '--' }}
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div class="summary-item">
            <div class="summary-label">学校导师评分</div>
            <div class="summary-value" :class="getGradeClass(overallGrade.teacherScore)">
              {{ overallGrade.teacherScore || '--' }}
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div class="summary-item">
            <div class="summary-label">企业导师评分</div>
            <div class="summary-value" :class="getGradeClass(overallGrade.companyScore)">
              {{ overallGrade.companyScore || '--' }}
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 详细评价 -->
    <el-tabs v-model="activeTab" class="grade-tabs">
      <el-tab-pane label="学校导师评价" name="teacher">
        <div v-if="teacherEvaluation" class="evaluation-detail">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="评价导师">{{ teacherEvaluation.teacherName }}</el-descriptions-item>
            <el-descriptions-item label="评分">
              <el-rate
                v-model="teacherEvaluation.score"
                disabled
                show-score
                score-template="{value}分"
              />
            </el-descriptions-item>
            <el-descriptions-item label="评价时间">{{ formatDate(teacherEvaluation.evaluatedAt) }}</el-descriptions-item>
          </el-descriptions>

          <div class="comment-section">
            <h3>评语</h3>
            <p>{{ teacherEvaluation.comment }}</p>
          </div>
        </div>
        <div v-else class="no-evaluation">
          <p>暂无学校导师评价</p>
        </div>
      </el-tab-pane>

      <el-tab-pane label="企业导师评价" name="company">
        <div v-if="companyEvaluation" class="evaluation-detail">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="评价企业">{{ companyEvaluation.companyName }}</el-descriptions-item>
            <el-descriptions-item label="评价导师">{{ companyEvaluation.mentorName }}</el-descriptions-item>
            <el-descriptions-item label="评分">
              <el-rate
                v-model="companyEvaluation.score"
                disabled
                show-score
                score-template="{value}分"
              />
            </el-descriptions-item>
            <el-descriptions-item label="评价时间">{{ formatDate(companyEvaluation.evaluatedAt) }}</el-descriptions-item>
          </el-descriptions>

          <div class="comment-section">
            <h3>评语</h3>
            <p>{{ companyEvaluation.comment }}</p>
          </div>
        </div>
        <div v-else class="no-evaluation">
          <p>暂无企业导师评价</p>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useStudentStore } from '../../store/student'
import { ElMessage } from 'element-plus'

const studentStore = useStudentStore()

const activeTab = ref('teacher')
const overallGrade = ref({})
const teacherEvaluation = ref(null)
const companyEvaluation = ref(null)

// 获取成绩信息
const fetchGrades = async () => {
  try {
    // 首先获取实习信息以获得internshipId和导师/企业名称
    const internshipsResponse = await studentStore.fetchMyInternships()

    if (internshipsResponse && internshipsResponse.content && internshipsResponse.content.length > 0) {
      // 使用第一个实习的信息
      const internship = internshipsResponse.content[0]
      const internshipId = internship.id

      // 从实习信息中获取导师和企业名称
      const teacherName = internship.teacherName || '未知教师'
      const companyName = internship.companyName || '未知企业'

      // 获取成绩详情
      const evaluationResponse = await studentStore.getFinalEvaluation(internshipId)

      // 解析教师评价
      if (evaluationResponse.teacherEvaluation) {
        teacherEvaluation.value = {
          teacherName: teacherName,
          score: evaluationResponse.teacherEvaluation.score || 0,
          comment: evaluationResponse.teacherEvaluation.comment || '无评语',
          evaluatedAt: evaluationResponse.teacherEvaluation.evaluatedAt
        }
      }

      // 解析企业评价
      if (evaluationResponse.companyEvaluation) {
        companyEvaluation.value = {
          companyName: companyName,
          mentorName: evaluationResponse.companyEvaluation.mentorName || '未知导师',
          score: evaluationResponse.companyEvaluation.score || 0,
          comment: evaluationResponse.companyEvaluation.comment || '无评语',
          evaluatedAt: evaluationResponse.companyEvaluation.evaluatedAt
        }
      }

      // 计算综合成绩
      const teacherScore = evaluationResponse.teacherEvaluation?.score || 0
      const companyScore = evaluationResponse.companyEvaluation?.score || 0
      const averageScore = teacherScore > 0 && companyScore > 0
        ? ((teacherScore + companyScore) / 2).toFixed(1)
        : (teacherScore || companyScore || null)

      overallGrade.value = {
        teacherScore: teacherScore || null,
        companyScore: companyScore || null,
        averageScore: averageScore
      }
    }
  } catch (error) {
    ElMessage.error('获取成绩信息失败: ' + (error.message || '未知错误'))
  }
}

// 根据分数获取等级样式
const getGradeClass = (score) => {
  if (!score) return ''

  if (score >= 90) return 'excellent'
  if (score >= 80) return 'good'
  if (score >= 70) return 'average'
  if (score >= 60) return 'pass'
  return 'fail'
}

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleDateString()
}

onMounted(() => {
  fetchGrades()
})
</script>

<style scoped>
.grade-view {
  padding: 20px;
}

.grade-summary {
  margin-bottom: 30px;
}

.summary-item {
  text-align: center;
}

.summary-label {
  font-size: 16px;
  margin-bottom: 10px;
}

.summary-value {
  font-size: 24px;
  font-weight: bold;
}

.summary-value.excellent {
  color: #67c23a;
}

.summary-value.good {
  color: #409eff;
}

.summary-value.average {
  color: #e6a23c;
}

.summary-value.pass {
  color: #909399;
}

.summary-value.fail {
  color: #f56c6c;
}

.grade-tabs {
  margin-top: 20px;
}

.comment-section {
  margin-top: 20px;
}

.comment-section h3 {
  margin-bottom: 10px;
}

.no-evaluation {
  text-align: center;
  padding: 40px 0;
  color: #909399;
}
</style>
